 <template>
  <div>
    <div class="finance-support-box">
      <Header />
      <div class="top-banner-box"></div>
      <div class="support-box">
        <div class="area1190">
          <div class="title-box">
            <h2 class="title">市场背景</h2>
            <p class="des">
              “多渠道、高效率、低成本、信息化、覆盖广”是晶马汽车金融服务的核心优势
            </p>
          </div>

          <div class="support-list-box flex jc-sb">
            <div class="item-box" @click="hoverStyle(0)" :class="{'active': selItem == 0}">
              <img class="item-img" src="../assets/finance/icon-1.jpg" alt="" />
              <h4 class="item-title">汽车消费</h4>
              <p class="item-des">
                新增或更新车辆时，存在资金不足或全额付款间接影响企业运营、资金运转;
              </p>
            </div>

            <div class="item-box" @click="hoverStyle(1)"  :class="{'active': selItem == 1}">
              <img class="item-img" src="../assets/finance/icon-2.jpg" alt="" />
              <h4 class="item-title">企业信用</h4>
              <p class="item-des">
                银行微信信用不足，达不到准入标准，赵城融资困难;
              </p>
            </div>

            <div class="item-box" @click="hoverStyle(2)"  :class="{'active': selItem == 2}">
              <img class="item-img" src="../assets/finance/icon-3.jpg" alt="" />
              <h4 class="item-title">融资渠道</h4>
              <p class="item-des">
                融资渠道、融资方式、融资额度、融资周期等有限，融资成本相对较高;
              </p>
            </div>

            <div class="item-box" @click="hoverStyle(3)"   :class="{'active': selItem == 3}">
              <!-- <img class="item-img pc" src="../assets/finance/icon-4.jpg" alt="" /> -->
              <img class="item-img mobile" src="../assets/finance/icon-4-m.jpg" alt="" />
              <h4 class="item-title">多次融资</h4>
              <p class="item-des">
                周期内多次融资时，多次提供资料，手续繁杂，资源浪费等;
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="solution-box">
        <div class="area1190">
          <h2 class="solution-title">解决方案</h2>
          <p class="solution-text">
            "解决方案是基于对客车融资领域的持续探索，不断优化金融产品，以专业团队为客户提供多元化的融资解决方案。<i class="hot">
              “多渠道、高效率、低成本、信息化、覆盖广”</i>
            是晶马汽车金融服务的核心优势，我们致力于完善“晶马汽车一金融机构一用户”合作共贏的发展途径和多样化的融资模式，满足终端客户更多需求。"
          </p>
          <img class="solution-center-circle" src="../assets/fubabceSupport/yuan.png" alt="" />
        </div>
      </div>
      <div class="support-box">
        <div class="title-box area1190">
          <h2 class="title">价值优势</h2>
          <p class="des">
            “多渠道、高效率、低成本、信息化、覆盖广”是晶马汽车金融服务的核心优势
          </p>
        </div>
      </div>

      <div class="step-outer-box">
        <div class="step-box area1190"></div>
        <div class="step-box-mobile">
          <div class="item-list">
            <div class="lable">01</div>
            <div class="content">
              <div class="title">发案灵活</div>
              <div class="info">可提供短期及长中期的信贷、租凭、保险等多种形式的金融润资方案，低门槛渠道准入，全主体的金融支持，信息化金融支持，满足个性化、差异化需求；</div>
            </div>
          </div>
          <div class="item-list">
            <div class="lable">02</div>
            <div class="content">
              <div class="title">专业服务</div>
              <div class="info">专属终端客户服务团队，提供优质现场服务，量身打招最佳金融方案；信贷系统APP，通过增加人脸识别和在线签约，提高用户体验；</div>
            </div>
          </div>
          <div class="item-list">
            <div class="lable">03</div>
            <div class="content">
              <div class="title">品牌创新</div>
              <div class="info">额度足、手续简、成本低，培养长期品牌价值，成为可信赖的金融服务提供商；</div>
            </div>
          </div>

        </div>
      </div>

      <div class="user-info-box">
        <div class="area1190">
          <h3 class="user-box-title">与我们的顾问联系，了解更多解决方案详情</h3>
          <div class="flex">
            <el-input class="input300" placeholder="姓名：" v-model="name">
            </el-input>
            <el-input class="input300" placeholder="联系方式：" v-model="phone"></el-input>
            <el-input class="input558" placeholder="需求说明：" v-model="content"></el-input>
          </div>

          <el-button class="sub-btn" type="danger" @click="submitTo()">提交</el-button>
        </div>
      </div>

      <Footer />
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import empty from "@/utils/common";
export default {
  name: "FinnanceSupport",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      name: "",
      phone: "",
      content: "",
      selItem: 0
    };
  },
  methods: {
    hoverStyle(index) {
      this.selItem = index;
    },
    submitTo(){
      if(empty(this.name)){
        this.$message({
          showClose: true,
          message: '姓名不能为空',
          type: 'warning'
        });
        return false;
      }
      if(empty(this.phone)){
        this.$message({
          showClose: true,
          message: '手机号不能为空',
          type: 'warning'
        });
        return false;
      }
      //手机号校验
      let url = '/form/sendMessages?';
      url+='content='+this.content;
      url+='&name='+this.name;
      url+='&phone='+this.phone;
      url+='&type='+this.value;
      if(!this.checkPhone(this.phone)){return false;
      }
      this.$http.get(url).then(response=> {
        this.$message({
          showClose: true,
          message: response.message,
          type: 'success'
        });
      })
    },
    checkPhone(phone){
      var pattern = /^1[34578]\d{9}$/;
      if(!pattern.test(phone)){
        this.$message({
          showClose: true,
          message:'手机号有误',
          type: 'error'
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.finance-support-box {
  // background: #fff;
}
.top-banner-box {
  width: 100%;
  height: 400px;
  background: url("../assets/fubabceSupport/top-banner.png") center center;
}
.support-box {
  text-align: left;
  background: #fff;
  padding-top: 40px;
  // margin-top: 40px;
  .support-list-box {
  }
  .title-box {
    height: 100px;
    background: url("../assets/fubabceSupport/title-bg.png") no-repeat 0 0;
    background-size: 100%;
    .title {
      height: 30px;
      font-size: 30px;
      line-height: 30px;
      color: #222221;
      padding-top: 35px;
    }
    .des {
      padding-top: 15px;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
      color: #898989;
    }
  }
  .support-list-box {
    margin-top: 38px;
    .item-box {
      padding: 0 13px;
      width: 229px;
      height: 308px;

      .item-img {
        width: 44px;
        height: 45px;
        margin-top: 67px;
      }
      .item-title {
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        color: #222221;
        margin-top: 27px;
      }

      .item-des {
        margin-top: 20px;
        font-size: 14px;
        line-height: 24px;
        color: #5a5a5a;
      }
    }

    .active {
      background: #d21f22;
      .item-title {
        color: #fff;
      }
      .item-des {
        color: #fff;
      }
    }

  }
}
.solution-box {
  height: 700px;
  background: url("../assets/fubabceSupport/yuan-bg.jpg") no-repeat 0 0;
  padding-top: 66px;
  .solution-title {
    font-size: 36px;
    line-height: 36px;
    color: #ffffff;
  }
  .solution-text {
    margin-top: 40px;
    text-align: left;
    width: 1130px;
    font-size: 16px;
    line-height: 36px;
    color: #dadada;
    .hot {
      color: #f79c31;
    }
  }
  .solution-center-circle {
    width: 460px;
    height: 460px;
    margin-top: 46px;
  }
}

.step-outer-box {
  padding-top: 80px;
  background: #fff;
  .step-box {
    width: 100%;
    height: 370px;
    background: url("../assets/fubabceSupport/step-bg.png") no-repeat center;
  }
}

.user-info-box {
  padding-top: 50px;
  width: 100%;
  height: 280px;
  .user-box-title {
    margin-bottom: 46px;
    font-size: 30px;
    line-height: 30px;
    color: #292929;
  }
  .input300 {
    width: 300px;
    margin-right: 20px;
    height: 60px;
  }
  .input558 {
    width: 558px;
    height: 60px;
  }
  .sub-btn {
    margin: 36px;
    width: 300px;
    height: 60px;
    font-size: 18px;
  }
}
.step-box-mobile {
  display: none;
}
/**手机端**/
@media (min-width: 320px) and (max-width: 800px) {
  .top-banner-box {
    height: 180px;
    background-size: 100% 100%;
  }
  .support-box {
    padding-top: 20px;
    .title-box {
      background: none;
      .title {
        padding-top: 10px;
        font-size: 22px;
        margin-left: 14px;
      }
      .des {
        padding: 10px 8px;
      }
    }
    .support-list-box {
      flex-wrap: wrap;
      .item-box {
        width: 50%;
        height: 200px;
        box-sizing: border-box;
        &:last-child {
          background: #d21f22;
          .item-title,
          .item-des {
            color: #fff;
          }
        }

        .item-img {
          margin-top: 20px;
          width: 30px;
          height: 30px;
        }
        .item-title {
          margin-top: 20px;
        }
      }
    }
  }

  .solution-box {
    width: 100%;
    padding-top: 30px;
    background-size: 100% 100%;
    .solution-title {
      font-size: 26px;
    }
    .solution-text {
      width: 100%;
      padding: 16px;
      margin-top: 0;
      box-sizing: border-box;
      font-size: 14px;
    }
    .solution-center-circle {
      width: 80%;
      height: auto;
      margin-top: 20px;
    }
  }
  .step-outer-box {
    .step-box {
      display: none;
      background: none;
    }
  }
  .area1190 {
    width: 100%;
  }
  .step-outer-box {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .step-box-mobile {
    display: block;
    .item-list {
      display: flex;
      text-align: left;
      padding: 0 10px;
      margin-bottom: 20px;
    }
    .lable {
      width: 26px;
      height: 30px;
      flex-shrink: 0;
      font-size: 20px;
      color: #fff;
      background: #d21f22;
      text-align: center;
      margin-right: 10px;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #323232;
      transform: translateY(-4px);
    }
  }
  .user-box-title {
    font-size: 18px !important;
  }
  .sub-btn {
    height: 40px !important;
  }
}
</style>